<template>
  <el-row :gutter="20">
    <el-col 
      v-for="item in qualityStandards" 
      :key="item.standardId" 
      :xs="24" 
      :sm="12" 
      :md="8" 
      :lg="6" 
      :xl="4"
    >
      <el-card class="standard-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>{{ item.standardName || '未命名标准' }}</h3>
          </div>
        </template>
        <div class="card-body">
          <p class="description">{{ item.description || '暂无详细描述' }}</p>
        </div>
        <template #footer>
          <div class="card-footer">
            <span class="standard-id">标准ID: {{ item.standardId }}</span>
          </div>
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  qualityStandards: {
    type: Array,
    required: true,
    default: () => []
  }
});
</script>

<style scoped>
.standard-card {
  height: 100%;
  transition: transform 0.3s ease;
}

.standard-card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  padding: 16px 0;
  min-height: 100px;
}

.description {
  color: #606266;
  line-height: 1.6;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  color: #909399;
  font-size: 12px;
}
</style>